@charset "utf-8";
$fontSize:100;
@function r($p){
    @return $p/$fontSize*1rem;
}
html{
    font-size: $fontSize*1px;
}
body{
    font-size: 13px;
} 

  

/*中部*/
.middle{
    width: 100%;
    background: #f5f5f5;
    //加载更多
    .loadmore{
        color: #bbbbbb;
        text-align: center;
        padding: r(18) 0;}
}
//中部图片背景部分
.m_pic{
     height: r(342);
     background: url(../img/05.jpg);
     background-size: 100%;
     position: relative;
    //透明黑色部分
    .m_pic_black{
       width: 100%;
       height: r(104);
       background: black;
       opacity: .8;
       position: absolute;
       bottom: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       //包裹标题&图标功能区的盒子
       >ul{
           text-align: center;
           color: white;
           >li{margin: r(10) 0;}
           span{background: #b20000;}
           .icon-yuan{font-size: 8px;
           letter-spacing: 8px;}
           .icon-yuan:hover{
               color: #b20000;}
       }
    }   
}
//产品
.m_product{
    width: 100%;
    text-align: center;
    padding-bottom: r(32);
    border-bottom: 1px solid #dddddd;
    >li{display: inline-block;}
    //单个产品
    .m_product_alone{
        background: #f6f6f6;
        width: r(282);
        margin: r(20) r(9) 0;
        >li:nth-child(1) img{
            width: 100%;
            overflow: hidden;}
        >li:nth-child(2){text-align: left;}
        //营销行&叶巧岚行
        .m_product_alone_nav1,
        .m_product_alone_nav2,
        .m_product_alone_nav1>p{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 10px;
            color: #c5c5c5;
        }
        //营销行
        .m_product_alone_nav1{
            width: 100%;
            margin: r(8) 0;
            >button{
                width: r(88);
                height: r(27);
                background: #b20000;
                font-size: 10px;
                color: white;
                line-height: 10px;
                border-radius: r(8);
            }
        }
        //叶巧岚行
        .m_product_alone_nav2{
            width: 100%;
            justify-content: flex-start;
            >div img{width: r(35);}
        }   
    }
}
